<template>
  <div class="w-p-100 h-p-100 relative">
    <div class="card-triangle"  :style="{ width: `${16 * scale}px`, height: `${16 * scale}px` ,backgroundColor:color}"></div>
    <div
      class="card-content flex-col"
      :style="{
        'clip-path': `polygon(0% 0%, calc(100% - ${20 * scale}px) 0%, 100%${
          20 * scale
        }px, 100% 100%, 0% 100%)`,
      }"
    >
      <div
        class="card-before"
        :style="{ width: `${20 * scale}px`, height: `${20 * scale}px` }"
      ></div>
      <div
        class="card-number h-p-70 flex-center text-bold"
        :style="{ color: color, fontSize: fontSize }"
      >
        {{ number }}
      </div>
      <div class="card-title h-p-30 text-white flex-center fz-12" :style="{backgroundColor:color}">{{ title }}</div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";

const porp = defineProps({
  number: {
    Type: Number | String,
    default: "",
  },
  title: {
    Type: String,
    default: "",
  },
  color: {
    Type: String,
    default: "#00F5FF",
  },
  fontSize: {
    Type: String,
    default: "30px",
  },
  scale: {
    Type: Number,
    default: 1,
  },
});
</script>

<style scoped>
.card-content {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(64,159,205,0.4);
}
.card-before {
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(64,159,205,0.4);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.card-triangle {
  position: absolute;
  top: 0;
  right: 0;
  /* background-color: #4dc2ff; */
  /* clip-path: polygon(0 0, 0 100%, 100% 100%); */
  clip-path: polygon(100% 100%, 100% 0%, 0% 0%);
}
.card-title {
  /* background-color: rgba(14, 85, 222, 0.3); */
  opacity: 0.75;
}
</style>